<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%   
String path = request.getContextPath();   
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
%> 
<!DOCTYPE html>
<html>
<head>
	<meta name="keywords" content="<c:forEach items='${taglist }' var="tag">${tag.name } ,</c:forEach>" />
	<meta content="${question.question }" name="description" />
    <title>${question.question }</title>
    <base href="<%=basePath%>">
    <link rel="shortcut icon" href="<%=basePath%>img/favo.ico"> 
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/todc-bootstrap.css" rel="stylesheet">
    <link href="css/global.css" rel="stylesheet">
    <link href="css/layout.css" rel="stylesheet">
    <link href="css/user.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/attension.js"></script>
    <script type="text/javascript"  charset="utf-8" src="<%=basePath%>xheditor/xheditor-1.1.14-zh-cn.min.js"></script>
</head>
<body>
<jsp:include page="include/topbar.jsp"></jsp:include>
<jsp:include page="include/logobar.jsp"></jsp:include>
<div class="layout grid-m0s5" style="margin-bottom:20px">
	<div class="main-wrap detail">
		<div class="hd tl">
          	<h3>答案</h3>
        </div>
		<div class="hd">
			<h3>
				${question.question }
			</h3>
		</div>
		<p class="tags">
			<span id="taglist">
				<c:forEach items='${taglist }' var="tag">
					<span class="badge tag">&nbsp;${tag.name }&nbsp;</span>
				</c:forEach>
            </span>
            <span id="tagsinput_addTag" class="tagsinput-add-container badge">
            	<input placeholder="新标签" id="tagsinput_tag" onfocus='$(this).css("width","80px")'  onblur='onblurTaginput(this)' style="color: rgb(102, 102, 102); width: 40px;">
            	<span class="addtag" id="addUserTagBtn"><i class="icon-plus-sign"></i></span>
            </span>
		</p>
		<p class="info">
			<span class='date'> 
 				<img src="upload/head/${question.user_head }?s=24" onerror='this.src="upload/head/default.jpg?s=24"'/>&nbsp;&nbsp;${question.user_name }&nbsp;回答于&nbsp;${question.answer_at }
 			</span> 
 			
 			<span class='action comment'> 
 				<a href="<%=basePath %>c/q/${question.id }.html#comment_list">评论(${question.comments_num })</a> 
 			</span> 
		</p>
		<div class="bd" style="margin-bottom:20px;">
		${question.answer }
		</div>
		<!-- JiaThis Button BEGIN -->
		<div class="jiathis_style">
			<a class="jiathis_button_tsina"></a>
			<a class="jiathis_button_tqq"></a>
			<a class="jiathis_button_weixin"></a>
			<a class="jiathis_button_renren"></a>
			<a class="jiathis_button_qzone"></a>
			<a class="jiathis_button_douban"></a>
			</div>
			<script type="text/javascript" >
			var jiathis_config={
				summary:"",
				shortUrl:false,
				hideMore:false
			}
		</script>
		<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
		<!-- JiaThis Button END -->
		<%-- 
		<div class="passit_barDiv" style="width:230px;float:left;"><a class="passit_default" href="http://www.passit.cn/bookmark.html" target="_blank"></a></div>
		--%>
		<p class="info" style="border:0 none;margin-top:0px;height:20px;line-height:20px;padding:0 14px;">
			<span class='action up' onclick="doAction('question','agree',${question.id },this)"> 
 				顶(<em>${question.agree_num }</em>) 
 			</span> 
 			<span class='action down' onclick="doAction('question','disagree',${question.id },this)"> 
 				踩(<em>${question.disagree_num }</em>) 
 			</span> 
 			<span class='action' onclick="doAction('question','collect',${question.id },this)"> 
 				收藏(<em>${question.collect_num }</em>) 
 			</span> 
 			<span class='action' onclick="doAction('question','favor',${question.id },this)"> 
 				喜欢(<em>${question.favor_num }</em>) 
 			</span> 
		</p>
		<div class="hd tl" id="comment_list">
          	<h3>评论<span class="saved">[&nbsp;共${question.comments_num }条&nbsp;]</span></h3>
        </div>
        <div class="commentlist bd" id="commentlist">
        <c:forEach items="${commentlist }" var="map">
        	<div class='comment event'>
				<div class='head'>
					<img src='upload/head/${map.user_head }?s=50' onerror='this.src="upload/head/default.jpg?s=50"'/>
				</div>
			 <div class='body'>
			 	<div class='hd'>
					<p>
						<a class='name' href="c/home/${map.user_id }.html">${map.user_name }</a>
					</p>
				</div>
				<div class='bd'>
					<p class='show'>
					${map.contents }
					</p>
				</div>
				<div class='ft'>
					<p>
						<span class='date'>
							${map.create_at }
						</span>
						<span class='action up' onclick="doActionComment('question','agree',${map.id },this)">
							顶(<em>${map.agree_num }</em>)
						</span>
						<span class='action down' onclick="doActionComment('question','disagree',${map.id },this)">
							踩(<em>${map.disagree_num }</em>)
						</span>
					</p>
				</div>
			</div>
			</div>
        </c:forEach>
        </div>
        <div id="getmore" style="cursor:pointer;text-align:center;margin-bottom:20px;color:#999999">
        	<a class="btn btn-small btn-link" onclick="loadComment()">
        	查看更多<input type='hidden' value=2 id="page"/>
        	</a>
        </div>
        <div class="hd tl" id="comment_list">
          	<h3>我要评论</h3>
        </div>
        <div class="add-comment bd" style="margin-top:10px;position:relative;">
        	<textarea id="comment-area" name="answer" style="width:600px;height:125px" 
						class="xheditor {skin:'nostyle',html5Upload:false,forcePtag:true,cleanPaste:2,disableContextmenu:true,width:'500',upImgUrl:'<%=basePath%>xheditor/upload.html',upMultiple:1,tools:'Bold,Italic,Underline,Link'}">
			</textarea>
			<a class="btn btn-info btn-small" onclick="publishComment()" style="position:absolute;top:3px;right:15px;cursor:pointer">发布</a>
        </div>
	</div>
	<div class="col-extra detail">
		<div data-spy="affix" data-offset-top="1">
		<p class="goback">
			<a class="img ">
				<img class="" src='upload/head/${question.user_head }?s=48' width=48 height=48 onerror='this.src="upload/head/m/default.jpg?s=48"'/>
			</a>
			<a class="back " href="javascript:history.go(-1)"><i class="icon-chevron-left"></i>&nbsp;返回</a>
			<a class="back " href="<%=basePath %>c/q/${question.id }.html#"><i class="icon-chevron-up"></i>&nbsp;顶部</a>
		</p>
		<ul class="unstyled list" style="width:300px">
			<c:forEach items='${relativelist }' var="sr">
				<li>
					<c:if test="${sr.type=='article' }">
						<a href="c/a/${sr.id }.html">
							${sr.title }
						</a>
					</c:if>
					<c:if test="${sr.type=='question' && sr.id!=question.id }">
						<a href="c/q/${sr.id }.html">
							${sr.title }
						</a>
					</c:if>
				</li>
			</c:forEach>
		</ul>
		</div>
	</div>
</div>
<input type="hidden" value="<%=basePath%>" id="baseUrl"/>
<jsp:include page="include/foot.jsp"></jsp:include>
<script>
$(document).ready(function(){
	$("#page").val(2);
	listen();
});
function loadComment(){
	var page = $("#page").val();
	var data={
			page:page,
			type:"question"
	};
	$.ajax({    
        type: "get",  
        url:"<%=basePath%>c/read-comment/${question.id }.json",
        contentType : 'application/json',
        data:data,
        dataType:'json',
        success: function(response){
			if(response.ok){
				for(var i=0; i<response.data.length; i++){
					var map = response.data[i];
					var html = buildComment(map,"question");
					$("#commentlist").append(html);
				}
				$("#page").val(++page);
				
				if(response.data.length===0){
					$("#getmore").html("没有了");
				}
			}
        },
        error: function(e){}
	});
}
function onblurTaginput(obj){
	setTimeout(function(){$(obj).css("width","40px");},1000);
}
function listen(){
	$("#addUserTagBtn").click(function(){
		var tagName = $("#tagsinput_tag").val();
		if($.trim(tagName)===''){
			return;
		}
		addTag();
	});

}
function addTag(){
	var data={tagname:$("#tagsinput_tag").val(),type:"question"};
	$("#addUserTagBtn").find("i").eq(0).html("<img src='img/loading-input.gif' />");
	$.ajax({    
        type: "post",  
        url:"<%=basePath%>c/add-tag/${question.id }.json",
        contentType : 'application/json',
        data:JSON.stringify(data),
        dataType:'json',
        success: function(response){
			if(response.ok){
				$("#taglist").append("&nbsp;<span class='badge tag' name='"+data.tagname+"'>&nbsp;"+data.tagname+"&nbsp;</span>");
				$("#tagsinput_tag").val('');
				$("#addUserTagBtn").find("i").eq(0).html("");
			}
        },
        error: function(e){}
	});
}
function publishComment(){
	var data={};
	data.content=$("#comment-area").val();
	data.type="question";
	if($.trim(data.content)===""){
		return ;
	}
	$.ajax({    
        type: "post",  
        url:"<%=basePath%>c/add-comment/${question.id }.json",
        contentType : 'application/json',
        data:JSON.stringify(data),
        dataType:'json',
        success: function(response){
			if(response.ok){
				$("#comment-area").val("");
				location.reload();
			}else{
				if(response.msg==="请先登录"){
					triggerLogin();
				}
			}
        },
        error: function(e){}
	});
}
</script>
<%-- 
<script type="text/javascript">
var passit_title = "";//自定义分享标题，删除和留空表示使用默认
var passit_url = "";//自定义分享网址，删除和留空表示使用默认
var passit_content= "";//自定义分享内容，删除和留空表示使用默认Meta中的描述
var passit_image= "";//自定义分享图片，删除和留空表示不分享图片
var sina_appkey= "";//sina微博appkey,删除和留空表示使用默认
var qq_appkey= "";//腾讯微博appkey,删除和留空表示使用默认
</script>
<script type="text/javascript">
bookmark_service_div="qq,kxzt,qqxy,baiduHi,bookmark,baidu,douban,sohuweibo,163weibo,more";
bookmark_service="sinaweibo,xnzt,qqweibo,qqkj,more";</script>
<script type="text/javascript" src="http://www.passit.cn/js/passit_bar_big_new.js?pub=0&simple=0&style=52" charset="UTF-8"></script>
--%>
</body>

</html>